<template>
  <view class="u-page">
    <up-empty
      v-if="messageList.length === 0"
      mode="message"
      text="暂无消息"
      margin-top="200"
    >
    </up-empty>
    <up-list v-if="messageList.length > 0" @scrolltolower="scrolltolower">
      <up-list-item v-for="(item, index) in messageList" :key="item.id" >
        <up-cell :center="false" @click="msgClick(item, index)">
          <template #icon>
            <view>
              <view style="position: relative;">
                <up-badge
                  v-if="item.unreadCount>0"
                  type="error"
                  :max="99"
                  :value="item.unreadCount"
                  :absolute="true"
                  :offset="[-5,-3]"
                  :is-dot="true"
                  :show-zero="false"
                  style="z-index:1"
                >
                </up-badge>
              </view>
              <up-avatar :src="item.icon" style="z-index:2" size="55"></up-avatar>
            </view>
          </template>
          <template #title>
            <up-text margin="-20px 0 0 5px" :lines="1" :size="16" :text="item.title"></up-text>
          </template>
          <template #label>
            <text class="up-line-2" v-html="item.content"></text>
          </template>
          <template #value>
            <view class="rightContent" >{{DateFormat(item.createTime)}}</view>
          </template>
        </up-cell>
      </up-list-item>
    </up-list>

  </view>
</template>

<script lang="ts" setup>
import { to } from 'await-to-js';
import { timeFrom } from 'uview-plus';
import {DateFormat} from '@/utils/index';
import useIMStore from '@/store/modules/im';


const imStore = useIMStore();

const messageList = ref([]);



const getMessageList = async () => {
  const [err, res] = await to(uni.$u.http.get(`/system/instantMessaging/messageTypeList`));
  messageList.value = res.data;
};
const scrolltolower = () => {

};
const msgClick = async (item: any, index: number) => {
  if (item.unreadCount > 0) {
    const [err, res] = await to(uni.$u.http.get(`/system/instantMessaging/updateReadByType`, { params: { messageType: item.type } }));
    imStore.reduceNumber(item.type, messageList.value[index].unreadCount);
    messageList.value[index].unreadCount = 0;
  }
  tab.navigateTo('/pages/mine/message/type-list?messageType=' + item.type);
};

//实时处理新消息
const realTimeProcess=async (message :MessageVo)=>{
  //将messageList中type和message.type相同的消息的unreadCount+1
  const index = messageList.value.findIndex((item) => item.type === message.messageType);
  if (index!== -1) {
    messageList.value[index].unreadCount++;
    messageList.value[index].icon = message.iconUrl;
    messageList.value[index].content = message.messageInfo;
    messageList.value[index].title = message.messageTitle;
    messageList.value[index].createTime = message.sendTime;
  }
}


onLoad(async () => {
  await getMessageList();
  await uni.pageScrollTo({ scrollTop: 0, duration: 300 });
  messageList.value.forEach(item=>{
    uni.$on(item.type, realTimeProcess);
  })


});
onUnload(()=>{
  messageList.value.forEach(item=>{
    uni.$off(item.type,realTimeProcess)
  })

})

</script>

<style scoped lang="scss">

.up-line-2 {
  margin-top: 5px;
  margin-left: 5px;
  font-size: 12px;
  color: #999999;

}
.rightContent{
  font-size: 13px;
  color: rgb(144, 147, 153);
}
.u-cell__body{
  align-items: stretch;
}



.u-page {
  padding:  0;
}

::v-deep.u-cell__body{
  padding-right: 5px;
  align-items: stretch;
}

</style>
